<template>
    <div 
        class="texts-box" 
        :class="className"
        :style="{ backgroundColor: data.backgroundColor,  backgroundImage: 'url('+ imgUrl +')'}"
    >
    <!-- {{ data }} -->

        
       <template>
    <LuckyWheel
            ref="LuckyWheel"
            width="300px"
            height="300px"
            :blocks="blocks"
            :prizes="prizes"
            :buttons="buttons"
            :defaultConfig="defaultConfig"
            @start="startCallBack"
            @end="endCallBack"
        />
        <div class="options">
            <p><span v-show="data.isTimes === 'a'">剩余抽奖次数：{{times}}</span></p>
            <p ><span v-show="data.isRecord === 'record'"> 中奖记录  </span></p>
        </div>
    </template>
    </div>
</template>

<script>
export default {
    name: 'Turntable',
    props: ['data', 'className'],
    data() {
        return {
            nowUrl: null,
            prizes: [
                { fonts: [{ text: '奖品区域', top: '10%' }], background: '#fff58b', name:'波多野结衣',imgs: [{src: require('../../assets/images/conp.jpg'), width: '30%', top:'35%', height: '50%'}] },
                { fonts: [{ text: '奖品区域', top: '10%' }], background: '#fed428', name:'苍井空',imgs: [{src: require('../../assets/images/conp.jpg'), width: '30%', top:'35%', height: '50%'}] },
                { fonts: [{ text: '奖品区域', top: '10%' }], background: '#fff58b', name: '吉泽明步',imgs: [{src: require('../../assets/images/conp.jpg'), width: '30%', top:'35%', height: '50%'}] },
                { fonts: [{ text: '奖品区域', top: '10%' }], background: '#fed428', name: '吉泽明步',imgs: [{src: require('../../assets/images/conp.jpg'), width: '30%', top:'35%', height: '50%'}] },
            ],
            buttons: [{
                radius: '25%',
                fonts: [{ text: '开始\n抽奖', fontColor: '#fff', top: '-50%', fontSize: '16px' }],
                imgs: [{ src: require('../../assets/images/btn.png'), width: '120%', top: '-175%' }]
            }],
            blocks: [
                { padding: '13px', background: '#d64737' }
            ],
            defaultConfig: {
                offsetDegree: 30
            },
            times: 3,
            radiosNum: 4
        }
    },
    created() {
    },
    computed: {
        imgUrl() {
            if (this.data.data[0]) {
                return this.data.data[0].url;
            }
        },
        luckOption() {
        }
    },
    mounted() {
        this.startCallBack()
    },
    watch: {
        'data.radio': function (newVal, oldVal) {
            if (Number(newVal) != Number(oldVal)) {
                this.radiosNum = Number(newVal)
                this.prizes = [];
                
                function getColorByRandom(){
                    let color = ''
                    if (colorFlag) {
                        color = "#fed330"
                        colorFlag = false
                    } else {
                        color = "#ffeaa7"
                    } 
                    return color;
                }
                for (let i = 0; i < Number(newVal); i ++ ) {
                    this.prizes.push({ fonts: [{ text: '奖品区域', top: '10%' }], background: getColorByRandom(), name:`波多野结衣${i}` })
                }
            }
            deep: true
            immediate: true
        },
        data: {
            handler(newVal, oldVal) {
                this.prizes = [];
                // var colorList = ["#1abc9c","#2ecc71","#3498db","#fed330","#ffeaa7","#55efc4","#81ecec","#f1c40f","#74b9ff","#fd9644"];
                // function getColorByRandom(colorList){
                //     let colorIndex = Math.floor(Math.random()*colorList.length);
                //     let color = colorList[colorIndex];
                //     colorList.splice(colorIndex,1);
                //     return color;
                // }
                // console.log(getColorByRandom(colorList))
                // for (let i = 0; i < this.radiosNum; i ++ ) {
                //     this.prizes.push({ fonts: [{ text: newVal.turnArr[i].prizeName, top: '10px' }], background: getColorByRandom(colorList), name:`波多野结衣${i}` })
                // }

                function getColorByRandom(){
                    let color = ''
                    if (colorFlag) {
                        color = "#fed330"
                        colorFlag = false
                    } else {
                        color = "#ffeaa7"
                        colorFlag = true
                    } 
                    return color;
                }
                for (let i = 0; i < this.radiosNum; i ++ ) {
                    let prizeNam = ''
                    if (newVal.turnArr[i].prizeName) {
                        prizeNam = newVal.turnArr[i].prizeName
                    } else {
                        prizeNam = '奖品名称'
                    }
                        this.prizes.push({ fonts: [{ text: prizeNam, top: '10%' }],imgs: [{src: require('../../assets/images/conp.jpg'), width: '30%', height: '50%',top: '35%'}], background: getColorByRandom(), name:`波多野结衣${i}` })
                }

                console.log(newVal, '-----------')
                if (newVal.imgArr.length > 0) {
                    for (let i = 0; i < newVal.turnArr.length; i ++ ) {
                        let prizeNam = ''
                        if (newVal.turnArr[i].prizeName) {
                            prizeNam = newVal.turnArr[i].prizeName
                        } else {
                            prizeNam = '奖品名称'
                        }
                        
                        if (newVal.turnArr[i].imgsInfo) {
                            this.prizes[i].imgs[0].src = newVal.turnArr[i].imgsInfo.url
                            this.prizes[i].imgs[0].width = '30%'
                            this.prizes[i].imgs[0]. height = '50%'
                            this.prizes[i].imgs[0].top = '35%'
                        }
                    }
                }
                    console.log(this.prizes,'--44---')
            },
            deep: true
        },
        
    },
    methods: {
        startCallBack () {
        this.$refs.LuckyWheel.play()
        setTimeout(() => {
            this.$refs.LuckyWheel.stop(Math.random() * 6 >> 0)
        }, 3000)
        },
        endCallBack (prize) {
        // alert(`恭喜你获得${prize.name}`)
        },
    }
}
let colorFlag = true;

</script>

<style lang="scss" scoped>
    .texts-box{
        padding: 20px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .content {
            white-space: pre-wrap;
        }
        div:first-child {
            margin: 0 auto;
        }
    }
    .options {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        p {
            cursor: pointer;
        }
        p:nth-child(2) {
            text-decoration:underline;
        }
    }
</style>